<template>
    <n-card class="paper-info">
        <div class="item-citation">
            <div>
                <n-text strong style="font-weight: bold;">学术论文</n-text>
            </div>
            <div>
                <n-text depth="3" underline>{{ info.year }}</n-text>
            </div>
        </div>
        <div class="item-content">
            <div class="info-title" @click="jump_blank('PaperIntro', info.id)">
                <n-ellipsis line-clamp="1" style="cursor: pointer;">{{ info.title }}</n-ellipsis>
            </div>
            <div>
                <n-text
                    italic
                    type="warning"
                    @click="jump_blank('Journal', info.venue.id)"
                    style="cursor: pointer;"
                >{{ info.venue.name }}</n-text>
            </div>
            <div class="info-author">
                <n-icon size="20" color="#767c82">
                    <person-icon />
                </n-icon>
                <div v-for="(item, index) in info.author" :key="index">
                    <n-text v-if="index !== 0" style="white-space: nowrap;">&nbsp;,&nbsp;</n-text>
                    <n-text
                        underline
                        depth="3"
                        @click="jump_blank('Author', item.id)"
                        style="cursor: pointer;white-space: nowrap;"
                    >{{ item.name }}</n-text>
                </div>
            </div>
            <div>
                <n-ellipsis line-clamp="3" :tooltip="false">{{ info.abstract }}</n-ellipsis>
            </div>
            <div style="float: left;">
                <n-icon size="25" color="#0077C2">
                    <quote-icon />
                </n-icon>
                <n-text style="color:#0077C2">{{ info.quote_time }}</n-text>
                <n-icon size="25" color="#651FFF" style="margin-left: 10px;">
                    <download-icon />
                </n-icon>
                <n-text style="color:#651FFF">{{ info.download_time }}</n-text>
            </div>

            
            <n-icon size="30" color="#EB5757" style="float: right;cursor: pointer;">
                <pdf-icon @click="toPreview" />
            </n-icon>
            <!-- 获取论文引用格式 -->
            <div style="float: right;cursor: pointer;">
                <n-icon size="25" color="#0077C2" @click="getPaperQuote();">
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 15h15"></path><path d="M21 19H6"></path><path d="M15 11h6"></path><path d="M21 7h-6"></path><path d="M9 9h1a1 1 0 1 1-1 1V7.5a2 2 0 0 1 2-2"></path><path d="M3 9h1a1 1 0 1 1-1 1V7.5a2 2 0 0 1 2-2"></path></g></svg>
                </n-icon>
            </div>
            <!-- 显示论文引用格式的窗口 -->
            <n-modal
                class="custom-card"
                v-model:show="showPaperQuote"
                preset="card"
                title="导出论文引用格式"
                style="width: 600px;"
                :bordered="false"
            >
                <n-text>{{ PaperQuoteText }}</n-text>
                <template #footer>
                    <n-button
                        class="copy-button"
                        :data-clipboard-text="PaperQuoteText"
                        @click="copyQuote"
                        color="#333333"
                    >复制</n-button>
                </template>
            </n-modal>
        </div>
    </n-card>
</template>

<script setup lang='ts'>
import { FormatQuoteFilled as QuoteIcon, DownloadRound as DownloadIcon, PictureAsPdfRound as PdfIcon, PersonFilled as PersonIcon ,FormatQuoteTwotone as getQuote} from '@vicons/material'
import { useMessage } from 'naive-ui';
import { getCurrentInstance,ref } from 'vue';
import { useRouter } from 'vue-router';
import Clipboard from 'clipboard';

// 引入路由
const router = useRouter()

// 引入消息函数
const message = useMessage()

// api访问代理
const { proxy } = getCurrentInstance() as any

const props = defineProps([
    'info'
])

//显示论文引用格式模态框
let showPaperQuote = ref(false)
// 论文引用格式
let PaperQuoteText = ref("论文的引用格式")

const jump_blank = ((name: string, id: string) => {
    if (id === "") {
        message.warning("十分抱歉，该信息暂未收录")
        return
    }
    let router_data = router.resolve({ name: name, params: { id: id } })
    window.open(router_data.href, '_blank')
})

const toPreview = (() => {
    let router_data = router.resolve({ name: "Preview", params: { id: props.info.id } })
    window.open(router_data.href, '_blank')
})

const getPaperQuote = (() => {
    showPaperQuote.value = true;
    console.log(props.info)
    proxy.$api.paper.paperQuote({ id: props.info.id }).then((result: any) => {
        if (result.success) {
            PaperQuoteText.value = result.txt;
            message.success('获取成功')
        } else {
            message.warning('导出失败:')
            message.warning(result.msg)
        }
    }).catch(() => {
        message.error('未知错误')
    });
})

//复制论文引用格式
const copyQuote = (() => {
    let clipboard = new Clipboard('.copy-button')
    clipboard.on('success', () => {
        message.success("已复制")
        clipboard.destroy()
    })
    clipboard.on('error', () => {
        message.error("复制失败，请重试")
        clipboard.destroy()
    })
})
</script>

<style scoped>
.paper-info {
    min-height: 220px;
    box-shadow: 0 5px 8px rgb(0 0 0 / 10%);
    margin-bottom: 20px;
}

.item-citation {
    width: 140px;
    display: inline-block;
    margin-bottom: 0;
}

.item-content {
    display: block;
    width: calc(100% - 140px);
    float: right;
}

.info-title :deep(.n-ellipsis) {
    color: #0077c2;
    font-weight: 500;
    font-size: large;
}

.info-author {
    margin: 5px 0;
    display: flex;
    flex-wrap: wrap;
}
</style>